import React from "react";
import { View, Text } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { createStyles } from "../styles";
import {
  GroupNotificationItem as NotificationItemType,
  NotificationAction,
} from "../types";
import { formatTimestamp } from "../utils";
import NotificationIcon from "./NotificationIcon";
import NotificationContent from "./NotificationContent";

interface NotificationItemProps {
  item: NotificationItemType;
  onAction: (id: string, action: NotificationAction) => void;
}

const NotificationItem: React.FC<NotificationItemProps> = ({
  item,
  onAction,
}) => {
  const { colors } = useTheme();
  const styles = createStyles();

  // 获取操作结果标签文本
  const getActionResultText = (action?: NotificationAction) => {
    switch (action) {
      case "accept":
        return item.type === "join_request" ? "已同意" : "已接受";
      case "reject":
        return item.type === "join_request" ? "已拒绝" : "已拒绝";
      case "confirm":
        return "已读";
      default:
        return "";
    }
  };

  // 获取操作结果标签颜色
  const getActionResultColor = (action?: NotificationAction) => {
    switch (action) {
      case "accept":
        return "#4CAF50"; // 绿色
      case "reject":
        return "#FF9800"; // 橙色
      case "confirm":
        return "#2196F3"; // 蓝色
      default:
        return colors.primary;
    }
  };

  return (
    <View
      style={[
        styles.notificationItem,
        {
          backgroundColor: colors.background,
          opacity: item.status === "processed" ? 0.7 : 1,
          borderRadius: 12,
          marginHorizontal: 16,
          marginVertical: 8,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.1,
          shadowRadius: 2,
          elevation: 2,
        },
      ]}
    >
      {/* 未读标记 */}
      {item.status === "unread" && (
        <View
          style={[
            styles.unreadDot,
            { backgroundColor: "#FF3B30" }, // 使用标准iOS红色
          ]}
        />
      )}

      {/* 已处理状态标签 - 45度倾斜丝带样式 */}
      {item.status === "processed" && item.actionResult && (
        <View
          style={[
            styles.actionResultTag,
            { backgroundColor: getActionResultColor(item.actionResult) },
          ]}
        >
          <Text style={styles.actionResultText}>
            {getActionResultText(item.actionResult)}
          </Text>
        </View>
      )}

      {/* 通知图标 */}
      <NotificationIcon item={item} />

      <View style={styles.notificationContent}>
        {/* 通知内容和操作按钮 */}
        <NotificationContent item={item} onAction={onAction} />
      </View>
    </View>
  );
};

export default NotificationItem;
